CSS 中省略号的几种写法

发表于 | 更新于: | 分类于 | 阅读次数:
字数统计: 957

CSS 中省略号的几种写法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>省略号的四种写法</title>
	<style>
	p{
		width: 80%;
		margin:auto;
	}
	.prg{
		height: 20px;
		line-height: 20px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
		/*
		white-space 
		设置如何处理元素内的空白。
		这个属性声明建立布局过程中如何处理元素中的空白符，默认值为 normal 
		normal 默认，空白会被浏览器忽略
		pre 空白会被浏览器保留，其行为方式类似 HTML 中的 <pre> 标签
		nowrap 文本不会换行，文本会在同一行上继续，知道遇到 <br> 标签为止
		pre-wrap 保留空白符序列，但是正常地进行换行
		pre-line 合并空白符序列，但是保留换行符
		inherit 规定应该从父元素继承 white-space 属性的值	

		text-overflow
		规定当文本溢出包含元素时发生的事情 默认值为 clip
		clip 修剪文本
		elipsis 显示省略符号来代表被修剪的文本
		string 使用给定的字符串来代表被修剪的文本	
		*/

		.prg1{
			position: relative;
			overflow: hidden;
			text-overflow: ellipsis;
			height: 60px;
			line-height: 20px;
		}
		.prg1::after{
			content: '...';
			padding-left: 3px;
			position: absolute;
			top: 20px;
			left: 0;
			display: block;
			height: 20px;
			width: 20px;
			background: #fff;
		}
		.prg2{
			display: -webkit-box;
			-webkit-box-orient:vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-line-clamp:1;
		}
		/*
		-webkit-line-clamp
		是一个不规范的属性，还没有出现在 CSS 规范草案中
		限制一个块元素显示的文本行数，为了实现该效果，它需要组合其他外来的Webkit属性，
		常见的属性：display:-webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示
		-webkit-box-orient 必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式
		text-overflow 可以用来多行文本的情况下，用省略号... 隐藏超出范围的文本。
		*/
	</style>
</head>
<body>
	<h3>单行省略...</h3>
	<p class="prg">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>

	<h3>多行省略...</h3>
	<p class="prg1">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>

	<h3>多行省略...</h3>
	<p class="prg2">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>

	<h3>多行省略...</h3>
	<p class="prg3">前端技术一般分为前端设计和前端开发，前端设计一般可以理解为网站的视觉设计，前端开发则是网站的前台代码实现，包括基本的HTML和CSS以及JavaScript/ajax，现在最新的高级版本HTML5、CSS3，以及SVG等。</p>

</body>
<script>
    (function (w) {
       	const shortLine = function (pragrafsClass, number) {
        const prgs = document.getElementsByClassName(pragrafsClass);
        for (let i = 0; i < prgs.length; i++) {
        	let contents = prgs[i].textContent;
        	if (contents.length >= number) {
        		let strs = contents.slice(0, number)
        		prgs[i].textContent = strs + "..."
        	}
        }
    }
	w.shortLine = shortLine
	})(window)
    window.shortLine('prg3',18)
  </script>
  </html>
0%